<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="zepto.js"></script>
  <script src="parabola.js"></script>
  <style>
    .boll {
       /*position: absolute;*/
       /*left: 100px;*/
       /*top: 350px;*/
       border-radius: 50px;
       width: 90px;
       height: 90px;
       float: left;
       background: red;
     }
    .boll img {
      width: 80px;
      height: 80px;
      margin: 5px;
      border-radius: 50px;
    }
    .box {
      height: 60px;
      width: 60px;
      line-height: 60px;
      text-align: center;
      border-radius: 50px;
      position: absolute;
      left: 100px;
      bottom: 10px;
      background: darkgrey;
    }
    .target {
      position: absolute;
      left: 50%;
      /*top: 0;*/
      /*right: 0px;*/
      bottom: 0px;
      border-radius: 50px;
      width: 50px;
      height: 50px;
      margin-left: -25px;
      background: #CDCDCD;
      /*z-index: 999;*/
    }
  </style>
</head>
<body>
<div class="btns" style="margin-top:20px">
  <a href="#" id="btn">加入</a>
  <a href="#" id="create">创建</a>
  <a href="#" id="reset">重置</a>
  <a href="#" id="run">开始运动</a>
  <a href="#" id="stop">停止运动</a>
  <a href="#" id="setOptions">设置配置参数</a>
</div>
<hr/>
<div class="boll">
  <img src="1.jpg">
</div>
<div class="boll">
  <img src="1.jpg">
</div>

<div id="box" class="box">
  box
</div>

<div id="target" class="target"></div>
<script>

  $(function() {

    $("#box").click(function (event) {
      alert($(this).offset().top);
      alert($(this).offset().left);
    });

    function toInteger(text){
      text = parseInt(text);
      return isFinite(text) ? text : 0;
    }

    $(".boll").click(function (event) {
      event.preventDefault();
      var imgSrc = $(this).children('img').attr('src');//获取当前点击图片链接
      var imgObj = $('<img src="' + imgSrc + '">').appendTo("body").css({
        "width": "30px",
        "height": "30px",
        "border-radius": "50px",
        "position": "absolute",
        "top": toInteger($(this).offset().top) + toInteger($(this).css("width"))/2-15,
        "left": toInteger($(this).offset().left)+ toInteger($(this).css("height"))/2-15,
      });
      var bool = new Parabola({
        el: imgObj,
//        offset: [500, 100],
//        duration: 100,
//        curvature: 0.005,
        callback: function () {
//          alert("sss");
  //          imgObj.remove();
//          bool.destory();
        },
        stepCallback: function (x, y) {
          /*$("<div>").appendTo("body").css({
            "position": "absolute",
            "top": this.$elTop + y + 'px',
            "left": this.$elLeft + x + 'px',
            "background-color": "#CDCDCD",
            "width": "5px",
            "height": "5px",
            "border-radius": "5px"
          });*/
        }
      });
      // 设置配置参数
      bool.setOptions({
        targetEl: $("#target"),
        curvature: 0.004,
        duration: 600
      });
      // 开始运动
      bool.start();
    });

  });









  // 重置
  $("#reset").click(function (event) {
    event.preventDefault();
    bool.reset();
  });
  // 开始运动
  $("#run").click(function (event) {
    event.preventDefault();
    bool.start();
  });
  // 停止运动
  $("#stop").click(function (event) {
    event.preventDefault();
    bool.stop();
  });

  // 设置配置参数
  $("#setOptions").click(function (event) {
    event.preventDefault();
    bool.setOptions({
      targetEl: $("#target"),
      curvature: 0.001,
      duration: 1000
    });
  });

</script>
</body>
</html>
